<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
 
const state = reactive({
    tableData: [
		{
			id: 1, 
			name: '测试',
			six: '女',
			spec: '规格',
			phone: '15502336548',
			level: '2',
			totalPrice: '2562',
			consumePrice: '256',
			registerTime: '2023-02-25 12:12:36',
			staff: '1554562312',
			consumeStore: '雁塔店',
			buyTime: '2023-02-25 12:12:36',
		}
	] as Array<any>,
    rowId: 0
})

const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    statistics: number
}>(), {
    statistics: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (id: number) => {
    state.rowId = id 
}

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="卡项详情" @close="closeDialog" style="width: 1300px;">
            <el-table :data="state.tableData" style="width: 100%">
				<el-table-column label="姓名" prop="name" />
				<el-table-column label="性别" prop="six" />
				<el-table-column label="手机号" prop="phone" />
				<el-table-column label="会员等级" prop="level" /> 
				<el-table-column label="总消费金额" prop="totalPrice" /> 
				<el-table-column label="本次消费金额" prop="consumePrice" /> 
				<el-table-column label="注册时间" prop="registerTime" />
				<el-table-column label="员工" prop="staff"  />
				<el-table-column label="消费门店" prop="consumeStore" />
				<el-table-column label="购买时间" prop="buyTime" />
				
			</el-table>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"  
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section>
        </el-dialog>
 
    </main>
</template>

<style lang='scss' scoped>

</style>